<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<style type="text/css">
			* {
				list-style: none;
				padding: 0;
				margin: 0;
			}

			#King {
				width: 644px;
				height: 79px;
				margin: 0 auto;
				background-color: #7FFFD4;
				margin-top: 100px;
				position: relative;
				display: flex;
			}

			#King-ul {
				width: 644px;
				height: 79px;
				display: flex;
			}

			li {
				width: 69px;
				height: 69px;
				float: left;
				margin-top: 5px;
				margin-left: 10px;
				cursor: pointer;
				position: relative;
			}
			li:first-child{
				width: 224px;
			}
			.small {
				width: 69px;
				height: 69px;
				border-radius: 15px;
				position: absolute;
			}
			.small1{
				display: none;
			}
			.big{
				display: none;
				position: absolute;
			}
			.big1{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="King">
			<ul id="King-ul">
				<li>
					<a href="##">
					<img class="small small1" src="Honor%20of%20Kings%20picture/105.jpg">
					<img class="big big1" src="Honor%20of%20Kings%20picture/105-freehover.png">
					</a>
				</li>
				<li>
					<a href="##">
					<img class="small small2" src="Honor%20of%20Kings%20picture/132.jpg">
					<img class="big big2" src="Honor%20of%20Kings%20picture/132-freehover.png">
					</a>
				</li>
				<li>
					<a href="##">
					<img class="small small3" src="Honor%20of%20Kings%20picture/167.jpg">
					<img class="big big3" src="Honor%20of%20Kings%20picture/167-freehover.png">
					</a>
				</li>
				<li>
					<a href="##">
					<img class="small small4" src="Honor%20of%20Kings%20picture/190.jpg">
					<img class="big big4" src="Honor%20of%20Kings%20picture/190-freehover.png">
					</a>
				</li>
				<li>
					<a href="##">
					<img class="small small5" src="Honor%20of%20Kings%20picture/501.jpg">
					<img class="big big5" src="Honor%20of%20Kings%20picture/501-freehover.png">
					</a>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			$(function() {
				$("#King-ul li").mouseenter(function() {
					$(this).stop().animate({
						width: 224
					},200).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
					$(this).siblings("li").stop().animate({
						width: 69
					},200).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
				})
			})
		</script>
	</body>
</html>
